<template>
  <div>
    <p class="back" @click="back">返回</p>

    <h3>房号信息</h3>
    <el-form ref="upForm" :model="upList" :rules="rules" label-width="120px">
      <!-- 第一部分：房号信息 -->
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="单元名称" prop="unitname">
            <el-input v-model="upList.unitname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="幢号" prop="buildnum">
            <el-input v-model="upList.buildnum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="楼层号" prop="storeynum">
            <el-input v-model="upList.storeynum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="房号" prop="homenum">
            <el-input v-model="upList.homenum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="住客姓名" prop="homename">
            <el-input
              v-model="upList.homename"
              @click.native="dialogVisible = true"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- 住客姓名对话框 -->
        <el-dialog title="住客姓名" width="60%" :visible.sync="dialogVisible">
          <el-radio-group v-model="radioType">
            <el-radio label="custom">自定义</el-radio>
            <el-radio label="copy">复制</el-radio>
          </el-radio-group>
          <!--      自定义 -->
          <el-input
            v-model="upList.homename"
            placeholder="请输入姓名"
            v-if="radioType === 'custom'"
            style="margin-top: 20px"
          />
          <!-- 复制 -->
          <div v-else style="margin-top: 20px; padding: 10px">
            <!-- 搜索账号 -->
            <el-input
              v-model="tableData2.username"
              placeholder="请输入用户账号"
              style="width: 40%"
            ></el-input>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" size="medium" @click="search">
              <i class="el-icon-search"></i>
              搜索
            </el-button>
            <!-- 列表 -->
            <br />
            <br />
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              border
              class="center-table"
              size="medium"
            >
              <el-table-column prop="id" label="ID" width="80px">
              </el-table-column>
              <el-table-column prop="username" label="用户账号">
              </el-table-column>
              <el-table-column prop="homeaddress" label="家庭住址">
              </el-table-column>
              <el-table-column label="类型">
                <template slot-scope="scope">
                  {{
                    scope.row.type == 1
                      ? "管理员"
                      : scope.row.type == 2
                      ? "普通用户"
                      : "未知"
                  }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80px">
                <template slot-scope="scope">
                  <el-button
                    type="success"
                    icon="el-icon-plus"
                    circle
                    size="mini"
                    @click="addUser(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              style="margin: 10px 0 0 45%"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[7, 10, 20, 30]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
            <!-- 选择结果 -->
            <h2>已选结果</h2>
            <el-table
              :data="addList"
              stripe
              style="width: 100%"
              border
              size="medium"
              class="center-table2"
            >
              <el-table-column prop="id" label="ID" width="80px">
              </el-table-column>
              <el-table-column prop="username" label="用户账号">
              </el-table-column>
              <el-table-column prop="homeaddress" label="家庭住址">
              </el-table-column>
              <el-table-column label="类型">
                <template slot-scope="scope">
                  {{
                    scope.row.type == 1
                      ? "管理员"
                      : scope.row.type == 2
                      ? "普通用户"
                      : "未知"
                  }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80px">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    icon="el-icon-minus"
                    circle
                    size="mini"
                    @click="removeUser(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button
              type="primary"
              @click="dialogVisible = false"
              v-if="radioType === 'custom'"
              >确定</el-button
            >
            <el-button type="primary" @click="choose" v-else>选择</el-button>
          </span>
        </el-dialog>
        <!-- 状态 -->
        <el-col :span="10">
          <el-form-item label="状态" prop="familystatus">
            <el-select
              v-model="upList.familystatus"
              placeholder="请选择状态"
              style="width: 100%"
            >
              <el-option label="已入住" :value="1"></el-option>
              <el-option label="未入住" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="100">
        <el-col :span="20" style="width: 100%">
          <el-tooltip
            content="可填写房屋的详细信息介绍：
            1.房屋的基本信息
            2.房屋的成员信息
            3.房屋的设备信息
            4.房屋未来的规划填报"
            placement="top"
            popper-class="my-tooltip"
          >
            <span class="doubt">?</span>
          </el-tooltip>
          <el-form-item label="房屋信息" prop="homemessage">
            <el-input
              v-model="upList.homemessage"
              type="textarea"
              :rows="6"
              placeholder="请填写房屋信息"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="100">
        <el-col :span="20" style="width: 100%">
          <el-tooltip
            content="可对家庭成员的信息实时录入：
            1.家庭的主要成员
            2.家庭的主要成员的信息填报
            3.家庭成员的健康信息状况
            4.家庭成员每日健康体温检测填写"
            placement="top"
            popper-class="my-tooltip"
          >
            <span class="doubt">?</span>
          </el-tooltip>
          <el-form-item label="家庭成员" prop="homesuggestion">
            <el-input
              v-model="upList.homesuggestion"
              type="textarea"
              :rows="6"
              placeholder="请填写家庭成员"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二部分：智能设备 -->
      <h3>智能设备</h3>
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="洗衣机数量" prop="washnum">
            <el-input v-model="upList.washnum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="Wi-Fi名称" prop="wifiname">
            <el-input v-model="upList.wifiname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="空调数量" prop="airnum">
            <el-input v-model="upList.airnum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="智能设备状态" prop="smartstatus">
            <el-select
              v-model="upList.smartstatus"
              placeholder="请选择状态"
              style="width: 100%"
            >
              <el-option label="完好" :value="1"></el-option>
              <el-option label="待维修" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三部分：家居设备 -->
      <h3>家居设备</h3>
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="书桌数量" prop="homedesk">
            <el-input v-model="upList.homedesk"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="椅子数量" prop="homechair">
            <el-input v-model="upList.homechair"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="衣橱数量" prop="homeclothes">
            <el-input v-model="upList.homeclothes"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="家居状态" prop="homestatus">
            <el-select
              v-model="upList.homestatus"
              placeholder="请选择状态"
              style="width: 100%"
            >
              <el-option label="完好" :value="1"></el-option>
              <el-option label="待维修" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item style="text-align: right; padding-right: 40px">
        <el-button type="success" @click="submitForm">保存</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage4: 1, //默认页码
      pageSize: 7,
      total: 0,
      dialogVisible: false, //住户姓名
      radioType: "custom", //默认选中自定义
      token: "",
      id: "",
      upList: {
        airnum: "",
        buildnum: "",
        communityname: "",
        familystatus: "",
        homechair: "",
        homeclothes: "",
        homedesk: "",
        homemessage: "",
        homename: "",
        homenum: "",
        homesuggestion: "",
        homestatus: "",
        smartstatus: "",
        storeynum: "",
        unitname: "",
        unitnum: "",
        unitstatus: "",
        washnum: "",
        wifiname: "",
      },
      addList: [],
      rules: {
        unitname: [
          { required: true, message: "请输入小区名称", trigger: "blur" },
        ],
        buildnum: [{ required: true, message: "请输入幢号", trigger: "blur" }],
        storeynum: [
          { required: true, message: "请输入楼层号", trigger: "blur" },
        ],
        homenum: [{ required: true, message: "请输入房号", trigger: "blur" }],
        homename: [
          { required: true, message: "请输入住客姓名", trigger: "blur" },
        ],
        familystatus: [
          { required: true, message: "请选择入住状态", trigger: "change" },
        ],
        washnum: [
          { required: true, message: "洗衣机数量不能为空", trigger: "blur" },
        ],
        airnum: [
          { required: true, message: "空调数不能为空", trigger: "blur" },
        ],
        smartstatus: [
          { required: true, message: "请选择智能设备状态", trigger: "change" },
        ],
        homedesk: [
          { required: true, message: "书桌数不能为空", trigger: "blur" },
        ],
        homechair: [
          { required: true, message: "椅子数不能为空", trigger: "blur" },
        ],
        homeclothes: [
          { required: true, message: "衣橱数不能为空", trigger: "blur" },
        ],
        homestatus: [
          { required: true, message: "请选择家居状态", trigger: "change" },
        ],
        homemessage: [
          { required: true, message: "请输入房屋信息", trigger: "blur" },
        ],
        homesuggestion: [
          { required: true, message: "请输入家庭成员", trigger: "blur" },
        ],
        wifiname: [
          { required: true, message: "wifi名不能为空", trigger: "blur" },
        ],
      },
      //   列表
      tableData: [],
      tableData2: [],
    };
  },
  created() {
    this.gettoken();
    this.getList();
    this.getUser();
  },
  methods: {
    gettoken() {
      this.token = localStorage.getItem("token");
      this.id = this.$route.params.id;
    },
    // 绑定数据
    async getList() {
      const res = await this.$axios.get(
        `http://community.byesame.com/house/getDetailId?id=${this.id}&token=${this.token}`
      );
      console.log(res);

      this.upList = res.data[0];
    },
    // 保存
    submitForm() {
      this.$refs.upForm.validate((valid) => {
        if (!valid) {
          console.log("验证失败");
          return false;
        }

        // 弹出确认框
        this.$confirm("确定保存该房号信息吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 用户点击确定，执行保存接口
            this.$axios
              .post("http://community.byesame.com/house/updatenumList", {
                id: this.id,
                h_id: this.id,
                unitname: this.upList.unitname,
                buildnum: this.upList.buildnum,
                storeynum: this.upList.storeynum,
                homenum: this.upList.homenum,
                homename: this.upList.homename,
                homemessage: this.upList.homemessage,
                homesuggestion: this.upList.homesuggestion,
                washnum: this.upList.washnum,
                wifiname: this.upList.wifiname,
                airnum: this.upList.airnum,
                homedesk: this.upList.homedesk,
                homechair: this.upList.homechair,
                homeclothes: this.upList.homeclothes,
                familystatus: this.upList.familystatus,
                smartstatus: this.upList.smartstatus,
                homestatus: this.upList.homestatus,
                token: this.token,
              })
              .then(() => {
                this.$router.push("/house/number");
                this.$message({
                  type: "success",
                  message: "房号设备信息更新成功",
                });
              })
              .catch((err) => {
                this.$message.error("保存失败，请稍后重试");
                console.error(err);
              });
          })
          .catch(() => {
            // 用户点击取消
            this.$message({
              type: "info",
              message: "已取消保存",
            });
          });
      });
    },
    // 返回
    back() {
      this.$router.push("/house/number");
    },
    // 列表
    getUser() {
      this.$axios
        .get(
          `http://community.byesame.com/users/getUserList?&currPage=${
            this.currentPage4 - 1
          }&pageNum=${this.pageSize}`
        )
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.tableData = res.data.data;
            this.total = res.data.total;
          }
        });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage4 = 1;
      this.getUser();
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.getUser();
    },
    // 搜索
    search() {
      this.$axios
        .get(
          `http://community.byesame.com/users/getUserList?username=${
            this.tableData2.username
          }&currPage=${this.currentPage4 - 1}&pageNum=${this.pageSize}`
        )
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.tableData = res.data.data;
            this.total = res.data.total;
          }
        });
    },
    // 添加
    addUser(row) {
      if (row.homeaddress) {
        this.$notify({
          title: "提示",
          message: `目前【${row.username}】已录入房间信息，请勿重复操作`,
        });
      } else {
        if (this.addList.length > 0) {
          this.$notify({
            title: "提示",
            message: `已选择【${row.username}】，若要重新选择，请移除已选结果`,
          });
        } else {
          this.addList.push(row);
        }
      }
    },
    // 移除
    removeUser() {
      this.addList.pop();
    },
    // 选择
    choose() {
      this.upList.homename = this.addList[0].username;
      this.addList = [];
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped>
.back {
  color: #5a9cf8;
  font-size: 14px;
  cursor: pointer;
  width: 30px;
}
.back:hover {
  color: #92daff;
}
h3 {
  font-size: 20px;
  padding-left: 10px;
  box-sizing: border-box;
  margin: 20px 0;
  border-left: 5px solid #5a9cf8;
}
.el-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.el-col {
  width: 50%;
}
.doubt {
  display: inline-block;
  background-color: #00bfff;
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 15px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 4.5%;
}
.center-table >>> .el-table__cell {
  text-align: center;
  vertical-align: middle;
}
.center-table >>> .el-table__header th {
  background-color: #eef1f6 !important;
  color: #333;
  font-weight: bold;
}
.center-table2 >>> .el-table__cell {
  text-align: center;
}
</style>